<template>
  <div class="goods-list">
    <div v-wechat-title="$route.meta.title"></div>     
    <tab class="list-tab" 
        custom-bar-width="1.7rem"
        bar-active-color="#172F6D"
        >
      <tab-item selected @on-item-click="onItemClick">全部分类</tab-item>
      <tab-item @on-item-click="onItemClick">音频</tab-item>
      <tab-item @on-item-click="onItemClick">视频</tab-item>
    </tab>
    <button-tab>
      <button-tab-item selected>全部</button-tab-item>
      <button-tab-item>付费</button-tab-item>
      <button-tab-item>免费</button-tab-item>
    </button-tab>
    <div class="item-list">
      <div class="item" @click="router({path: './courseDetails'})">
        <img src="@/assets/fenleiliebiao03.png" alt="">
        <span class="tag">视频</span>
        <div class="cons">
          <p class="title">新手：魔方底棱归位</p>
          <p class="flex">
            <span class="price">¥25.55</span>
            <span class="num">4.6万人购买</span>
          </p>
        </div>
      </div>
      <div class="item">
        <img src="@/assets/fenleiliebiao03.png" alt="">
        <span class="tag">视频</span>
        <div class="cons">
          <p class="title">新手：魔方底棱归位</p>
          <p class="flex">
            <span class="price">¥25.55</span>
            <span class="num">4.6万人购买</span>
          </p>
        </div>
      </div>
      <div class="item">
        <img src="@/assets/fenleiliebiao03.png" alt="">
        <span class="tag">视频</span>
        <div class="cons">
          <p class="title">新手：魔方底棱归位</p>
          <p class="flex">
            <span class="price">¥25.55</span>
            <span class="num">4.6万人购买</span>
          </p>
        </div>
      </div>
      <div class="item">
        <img src="@/assets/fenleiliebiao03.png" alt="">
        <span class="tag">视频</span>
        <div class="cons">
          <p class="title">新手：魔方底棱归位</p>
          <p class="flex">
            <span class="price">¥25.55</span>
            <span class="num">4.6万人购买</span>
          </p>
        </div>
      </div>
      <div class="item" @click="router({path: './audioDetails'})">
        <img src="@/assets/fenleiliebiao03.png" alt="">
        <span class="tag audio">音频</span>
        <div class="cons">
          <p class="title">新手：魔方底棱归位</p>
          <p class="flex">
            <span class="price">¥25.55</span>
            <span class="num">4.6万人购买</span>
          </p>
        </div>
      </div>
    </div>
    <xuanfu-box></xuanfu-box>
  </div>
</template>

<script>
  import xuanfuBox from '@/components/xuanfuBox'
  import { Tab, TabItem, ButtonTab, ButtonTabItem } from 'vux'

  export default {
    components: {
      ButtonTab,
      ButtonTabItem,
      Tab,
      TabItem,
      xuanfuBox
    },
    data () {
      return {
        is_check: true
      }
    },
    created () {
      this.$route.meta.title = "魔方初级"
    },
    methods: {
      router (path) {
        this.$router.push(path)
      },
      onItemClick (index) {
        console.log('on item click:', index)
      },
    }
  }
</script>

<style lang="stylus" scoped>
.goods-list
  width 100%
  min-height 100vh
  overflow hidden
  background-color #fff
  .list-tab
    padding-top 5rem
    .vux-tab-container
      height 5rem
      .vux-tab-item.vux-tab-selected
        font-weight bold
      .vux-tab-item
        color #000
        font-size 1.6rem
        font-weight 400
  .item-list
    overflow hidden
    padding 0 1.5rem
    padding-bottom 2rem
    .item
      margin-top 2.5rem
      float left
      width calc(50% - .75rem)
      position relative
      &:nth-child(2n)
        margin-left 1.5rem
      .tag
        position absolute
        width 4.1rem
        background-color rgba(0,0,0,.6)
        height 1.6rem
        line-height 1.6rem
        color #fff
        text-align center
        border-radius .2rem
        font-size 1.1rem
        top 7.1rem
        right .6rem
      .tag.audio
        background-color rgba(168,30,39,.8)
      .title
        width 100%
        white-space nowrap
        overflow hidden
        font-size 1.3rem
        font-weight 500
        text-overflow ellipsis
        color #333
        padding-top 1rem
        padding-bottom .8rem
      .flex
        display flex
        .price
          flex 1
          text-align left
          color #D03718
          font-size 1.3rem
          font-weight bold
          line-height 1.3rem
        .num
          flex 1
          text-align right
          color #999
          font-size 1.1rem
          line-height 1.1rem
</style>
